<template>
    <div class="stock-box"  @touchstart="touchStart($event)" @touchend="touchEnd($event)"> 
      <div class="filter-top"> 
        <div class="search-box">
            <search v-model="searchText"
                @on-submit="onSubmit"
                position= "relative"
                placeholder="请输入商品名"
                ref="search">
            </search>    
        </div>  
      </div>
      <div class="tabr-box">
        <div :class="[ 'tabr-item' , actIndex == 1 ? 'active' : '']" @click="getSaleList()">已上架</div>
        <div :class="[ 'tabr-item' , actIndex == 1 ? '' : 'active']"  @click="getUnSale()">待上架</div>
      </div>
      <div class="goods-box">
          <div class="goods-list" v-for="(item,index) in goodsList" :key="index"> 
              <div class="goods-left">
                  <img :src="item.poster" alt="" class="goods-img">
              </div>
              <div class="goods-right">
                  <div class="goods-name">
                    {{item.goodsName}}
                     <!-- <div :class="[ actIndex == 1 ? 'act-food' : 'unsale-food']"> {{ actIndex == 1 ? '售卖中' : '已下架'  }} </div> -->
                  </div>
                  <div class="goods-price-line">
                    <div class="goods-price"><span>售价:</span>{{ item.retailPrice ? '￥'+ item.retailPrice + '/份' :"未设置" }} </div> 
                  </div>
                  <div class="goods-num" v-show="actIndex == 1"><span>库存(包):</span>{{item.stock}}</div>
              </div>
              <div class="setbtn isbtn" @click="modify(index)" v-show="actIndex == 1">价格调整</div>
              <div class="setbtn isbtn" @click="setStock(index)" v-show="actIndex == 2">上架</div>
              <div class="setbtn1 isbtn" @click="underSale(index)" v-show="actIndex == 1">下架</div>
           </div>
           <nodata v-if="!goodsList || goodsList.length==0" />
      </div>
      <div class="height120"></div>
      
      <div class="btn isbtn" @click="copyToShop()" v-if="showCopyBtn">复制到其他店铺</div>

      <!-- 修改弹窗 -->
      <x-dialog :show.sync="dailog_show" class="dialog"  hide-on-blur>
        <div class="dia-title">修改商品库存及价格</div>
        <div class="dia-content">
            <div class="dia-tips">正在设置 <span> {{ goodsList.length > 0 ? goodsList[set_Stock_Index].goodsName : '' }} </span> 的库存和价格</div>
            <div  class="flex-box"><div  class="left-text">库存:</div>  <input type="number" class="input-dia" v-model="stockNum" placeholder="请输入库存" /></div>
            <div class="money-set"><div class="left-text">价格(元/份):</div>  <input type="number" class="input-dia" v-model="goodsPrice" placeholder="请输入价格" /></div> 
            <div class="money-set"> <div class="left-text">折扣(0-1):</div>   <input type="number" :max="1" class="input-dia" v-model="sale_discount" placeholder="请输入折扣" /></div> 
        </div>
        
        <div class="btn-box">
            <div class="cancle-btn" @click="dailog_show = false"> 取消 </div>
            <div class="confirm-btn" @click="confirmChange()">确认</div>
        </div>
        </x-dialog>
        <!-- 上架弹窗 -->
        <x-dialog :show.sync="sale_dailog_show" class="dialog"  hide-on-blur>
          <div class="dia-title">上架</div>
          <div class="dia-content">
              <div class="dia-tips"> 正在上架 <span> {{ goodsList.length > 0 ? goodsList[set_Stock_Index].goodsName : '' }} </span></div>
              <div class="flex-box"> <div  class="left-text">库存:</div>  <input type="number" class="input-dia" v-model="sale_goodsStock" placeholder="请输入库存" /></div>
              <div class="money-set"> <div class="left-text">价格(元/份):</div>   <input type="number" class="input-dia" v-model="sale_goodsPrice" placeholder="请输入价格" /></div> 
              <div class="money-set"> <div class="left-text">折扣(0-1):</div>   <input type="number" :max="1" class="input-dia" v-model="sale_discount" placeholder="请输入折扣" /></div> 
            </div>
          <div class="btn-box">
              <div class="cancle-btn" @click="sale_dailog_show = false"> 取消 </div>
              <div class="confirm-btn" @click="confirmToSale()">确认</div>
          </div>
          </x-dialog>
    
    </div>
  
  </template>
  
  <script>
  import row from '@/components/row'
  import { Search ,XDialog} from 'vux'
  import api from '@/api/api.js'  
  import nodata from '@/components/nodata'
  export default { 
    components: {
      row,
      nodata,
      Search,
      XDialog
    },
    data () {
      return { 
          stockNum:'',
          dailog_show:false,
          sale_dailog_show:false,
          sale_goodsStock:'',
          sale_goodsPrice:'',
          sale_discount:'',
          defult_endTime:'',
          type:'',
          pageNum: 1,
          pageSize: 1000,
          isLoading:false,
          replWarehouseId:'',
          search_time:'',
          searchText:'',
          goodsList:[], 
          totalPage:1,
          set_Stock_Index:0,
          actIndex: 1,
          goodsPrice:'', 
          showCopyBtn:false,
      }
    },
    created(){
      let userInfo = {};
      if (localStorage.hj_userInfo) {
          try {
            userInfo = JSON.parse(localStorage.hj_userInfo);
          } catch (err) {
            userInfo = {};
          }
      }
      if(userInfo.type == 1){
        this.showCopyBtn = true;
      }
    },
    mounted () { 
       this.replWarehouseId=this.$route.query.warehouseId;
       this.type=this.$route.query.type; 
       this.getStockList();
    },
    filters: {
       
    },
    
    methods: {
      setStock(index){ // 上架
        this.sale_dailog_show = true;
        this.set_Stock_Index = index; 
        this.sale_goodsPrice = this.goodsList[index].retailPrice; 
        this.sale_discount = '';
      },
      //确认上架
      confirmToSale(){
        if(!this.sale_goodsPrice){
          return  this.$vux.toast.show({
                    text: '请填写价格',
                    type:'text'
                  })
        }
        if(this.sale_discount  && this.sale_discount>1){
          return  this.$vux.toast.show({
                    text: '折扣不能大于1',
                    type:'text'
                  })
        }
        this.sale_dailog_show = false;
        this.$vux.confirm.show({
          title: '警告',
          content: `确认上架${this.goodsList[this.set_Stock_Index ].goodsName}吗？`, 
          onCancel () { 
          },
          onConfirm: ()=> {
            api.foodMng.putGoodsOnSale({ 
              goodsId: this.goodsList[this.set_Stock_Index ].id,
              storeId: this.$route.query.id,
              stock:this.sale_goodsStock,
              price: this.sale_goodsPrice,
              discount: this.sale_discount,
            },res=>{
              return this.$vux.toast.show({
                text: '商品已上架',
                type:'text',
                onShow:res=>{
                  this.goodsList.splice(this.set_Stock_Index,1);
                 
                }
              })
            }) 
          }
        })
      },
      modify(index){
        this.set_Stock_Index = index ; 
        this.stockNum = this.goodsList[index].stock;
        this.goodsPrice = this.goodsList[index].retailPrice;
        this.sale_discount = this.goodsList[index].discount;
        this.dailog_show = true ; 
      },
      //下架
      underSale(i){
        this.$vux.confirm.show({
          title: '警告',
          content: `确认下架${this.goodsList[i].goodsName}吗？`, 
          onCancel () { 
          },
          onConfirm: ()=> {
            api.foodMng.delSaleGoods({
            "stockId":this.goodsList[i].stockId,
            },res=>{
              return this.$vux.toast.show({
                text: '商品已下架',
                type:'text',
                onShow:res=>{
                  this.goodsList.splice(i,1);
                  // this.$set([],"stock",this.stockNum)
                }
              })
            }) 
          }
        })
        
      },
      onSubmit(){
        this.pageNum = 1;
        if(this.actIndex == 1){
          this.getStockList();
        }else{
          this.getUnsaleList()
        }
        
      },
      //选择店铺
      copyToShop(){
        this.$router.push({path:'/chooseFoodsShop',query:{
          id:this.$route.query.id
        } })
      },
      confirmChange(){
        if(this.stockNum<0 || this.stockNum === "" ){
          return this.$vux.toast.show({
                    text: '库存不能小于0',
                    type:'text'
                  })
        }
        if(this.goodsPrice<0 || this.goodsPrice === "" ){
          return this.$vux.toast.show({
                    text: '价格不能小于0',
                    type:'text'
                  })
          }
          if(this.sale_discount  && this.sale_discount>1){
            return  this.$vux.toast.show({
                      text: '折扣不能大于1',
                      type:'text'
                    })
          }
          this.dailog_show = false;
          this.$vux.confirm.show({
            title: '警告',
            content: `确认设置？`, 
            onCancel () { 
            },
            onConfirm: ()=> {
              api.foodMng.stockModify({
                    "stockId":this.goodsList[this.set_Stock_Index].stockId,
                    "stock": this.stockNum,
                    retailPrice: this.goodsPrice,
                    discount: this.sale_discount,
                },res=>{
                  return this.$vux.toast.show({
                    text: '设置成功',
                    type:'text',
                    onShow:res=>{
                      this.getSaleList();
                    }
                  })
              }) 
            }
          })
      },
      getSaleList(){
        this.pageNum =1;
        this.actIndex = 1;
        this.getStockList();
      },
      
      //已上架商品列表
      getStockList(){
        this.isLoading = true;
          api.stockMng.stockList({ 
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              valueId:this.$route.query.id,
              goodsName: this.searchText ? this.searchText : ''
          },res=>{
              this.goodsList =  res.result.data;
              this.isLoading = false;
              this.totalPage = res.result.totalPage;
        }) 
      },
      getUnSale(){
        this.pageNum =1;
        this.actIndex = 2;
        this.getUnsaleList();
      },
      //待上架上架商品列表
      getUnsaleList(){
        this.isLoading = true;
        api.foodMng.getGoodsList({  
            storeId:this.$route.query.id,
            goodsName: this.searchText ? this.searchText : ''
        },res=>{
            this.goodsList =  res.result;
            this.isLoading = false; 
        }) 
      },
      touchStart(e) {
          this.startY = e.targetTouches[0].pageY;
          this.startX = e.targetTouches[0].pageX;  
      },
      scrollToEnd(e) {
          let scrollHeight = this.$el.scrollHeight; 
          let clientHeight = this.$el.clientHeight; 
          let scrollTop = this.$el.scrollTop; 
          if (scrollTop + clientHeight >= scrollHeight-50 ) { //下拉到底了
            this.doLoadMore()  
          } 
      },
      touchEnd(e) {
        if (this.isLoading) {
            return;
        }
        let endX = e.changedTouches[0].pageX,
            endY = e.changedTouches[0].pageY,
            dy = this.startY - endY,
            dx = endX - this.startX;
        if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
            return;
        }
        if (endY < this.startY) {
            this.scrollToEnd(e)
        }
      },
      doLoadMore() { 
        if(this.pageNum < this.totalPage){
          ++this.pageNum;
          this.getStockList()
        }
        return
      
      },
    }
  }
  </script>
  <style lang="less" scoped>
  .money-set{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .12rem 0;
  }
  .left-text{
    width: 2.0rem;
    word-break: break-all;
    text-align: right;
    padding-right: .12rem;
  }
  .flex-box{
    display: flex;
    align-items: center;
  }
  .tabr-box{
    height: 45px;
    background: #fff;
    z-index: 99;
    box-shadow: 0 0 7px #ddd ;
    display: flex;
    padding: 0 .45rem;
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    .tabr-item{
      flex: 1;
      position: relative;
      text-align: center;
      height: 45px;
      line-height: 45px;
      &.active{
        color: #FABE00;
        font-weight: bold;
        font-size: .32rem;
        &::before{
          content: '';
          position: absolute;
          width: 20%;
          left: 40%;
          bottom: 0;
          height: 3px;
          border-radius: 2px;
          background: #FABE00;
        }
      }
    }
  }
  .dia-title{
    height:.78rem;
    line-height: .78rem;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
  
  }
  .act-food{
    font-weight: 400;
    color: #fff;
    background: #FABE00;
    border-radius: .08rem;
    font-size: .24rem;
    margin-left: .20rem;
    padding: .04rem .24rem;
  }
  .unsale-food{
    font-weight: 400;
    color: #999;
    background: #eee;
    border-radius: .08rem;
    font-size: .24rem;
    margin-left: .20rem;
    padding: .04rem .24rem;
  }
  

    .btn-box{
        display: flex;
    &>div{
      flex: 1;
      text-align: center;
      height: 45px;
      line-height: 45px;
    }
    .cancle-btn{
      color: #666;
    }
    .confirm-btn{
      color: green;
    }
  }
  .dia-content{
    padding: .24rem;
    .dia-tips{
      color: #666;
      margin-bottom: .12rem;
      font-size: .22rem;
      text-align: left;
      span{
        color: red;
        font-size: .28rem;
      }
    }
    .input-dia{
      height: .68rem;
      border: 1px solid #ccc; 
      padding: 0 .20rem;
    }
  }
    /deep/.vux-no-group-title{
      margin-top: 0;
  }
  /deep/.weui-cell{
      justify-content: center;
  }
  /deep/.weui-cell_access .weui-cell__ft{
      flex: initial;
  }
  .stock-box{ 
    position: relative;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition-duration: 300ms;
    padding-top: 90px;
  }
  .setbtn{
      color: #FABE00;
      padding: .08rem .18rem;
      border-radius: .08rem;
      border: 1px solid #FABE00;
      text-align: center;
      position: absolute;
      font-size: .22rem;
      right: 0;
      bottom: .24rem;
  }
  .filter-top{
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      border-bottom: 1px solid #eee;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      z-index: 3;
      .isclick{
          border-width: 0 1px 1px 0;
          margin-top: -6px;
      }
  }
  .search-box{
      width: 90%;
  }
  .filter-content{
    background: #fff;
    width: 100%;
    padding: 20px;
    /deep/.weui-search-bar:before{
      height: 0;
    }
    /deep/.weui-search-bar::after{
      height: 0;
    }
    .row-box{
      margin-bottom: 20px;
    }
    .filter-title{
      padding-top: 20px;
  
    }
    .data-time-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  /deep/.weui-search-bar,.vux-search-fixed{
    position: relative !important;
    padding: 0;
    background: #fff;
  }
  /deep/.weui-search-bar__cancel-btn{
    text-decoration: none;
  }
  /deep/.weui-search-bar:after{
    display: none;
  }
  /deep/.weui-search-bar::before{
    display: none;
  }
  .setbtn1{
      color: #fff;
      padding: .08rem .18rem;
      border-radius: .08rem;
      border: 1px solid #FABE00;
      background: #FABE00;
      text-align: center;
      position: absolute;
      font-size: .22rem;
      right: 1.8rem;
      bottom: .24rem;
  }
  .goods-box{
      padding: 0.24rem;
  }
  .goods-list{
      display: flex;
      padding: .32rem 0;
      position: relative;
      &::before{
          position: absolute;
          bottom: 0;
          content: '';
          left: 0;
          right: -20px;
          height: 1px;
          background: #f5f5f5;
      }
  }
  
  .goods-img{
      width: 1.48rem;
      height: 1.48rem;
      border-radius: .12rem;
      background: #ddd;
  }
  .goods-name{
      font-size: .30rem;
      font-weight: bold;
      line-height: .34rem;
      display: flex;
      align-items: center;
  }
  .goods-price-line{
    display: flex;
    justify-content: space-between;
  
  }
  .goods-price,.goods-num{
      font-size: .24rem;
      & span{
          margin-right: .12rem;
          color: #999;
      }
  }
  .goods-right{
      width: 1.48rem;
      height: 1.48rem;
      flex: 1;
      padding-left: .20rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  
  .height120{
      height: 60px;
  }
  .btn{
      text-align: center;
      line-height: 50px;
      background: #FABE00;
      color: #fff;
      height: 50px;
      font-size: 16px;
      letter-spacing: 4px;
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
  }
 
  </style>